<template>
  <div class="circular-value-list d-flex jc-center">
    <div v-for="item in items" :key="item.label" class="circular-item" @click="$emit('item-click', item)">
      <!-- 圆形外框 -->
      <div class="circular-wrapper" :style="{ borderColor: item.color }">
        <span class="circular-value">{{ item.value }}</span>
      </div>
      <!-- 标签 -->
      <div class="item-label mt-1">{{ item.label }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CircularValueList',
  props: {
    // 列表数据：[{ label: '接警数', value: 24, color: '#00baff' }, ...]
    items: {
      type: Array,
      required: true,
      validator: (arr) =>
          arr.every((item) => 'label' in item && 'value' in item)
    }
  },
  // 可设置默认颜色
  data() {
    return {
      defaultColor: '#00baff'
    }
  }
}
</script>

<style scoped>
.circular-value-list {
  width: 100%;
  padding: 10px 0;
}

.circular-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100px;
  margin: 0 5px;
  cursor: pointer;
}

.circular-wrapper {
  width: 55px;
  height: 55px;
  border: 2px solid;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 186, 255, 0.1);
  box-shadow: 0 0 6px rgba(0, 186, 255, 0.3);
}

.circular-value {
  font-size: 13px;
  font-weight: bold;
  color: #ffffff;
}

.item-label {
  font-size: 12px;
  color: #c3cbde;
  text-align: center;
  margin-top: 6px;
}
</style>
